<template>
	<view class="evaluation-list" :style="{'--height':`${topHeight}rpx`}">
		<common-navbar title="我的评价"></common-navbar>
		<u-tabs :list="tabList" name='name' :is-scroll="false" inactive-color="#999999" active-color="#46a3f4"
			:current="current" @change="tabsChange" class="tabs" font-size="28" height="88" bar-height="8"
			bar-width="56" v-if="userInfo&&!userInfo.is_lawyer"></u-tabs>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="getEvaluationList">
					<orderItem v-for="item in tabList[0].evaluationList" :key="item.id" :orderDataItem="item" />
					<u-loadmore :status="tabList[0].loadStatus" @click.native="getEvaluationList" />
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="getEvaluationList">
					<evaluationItem @onClickReply="onClickReply" v-for="item in tabList[1].evaluationList"
						:key="item.id" :evaluationData="item" />
					<u-loadmore :status="tabList[1].loadStatus" @click.native="getEvaluationList" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<dropDownMenu :isDropDowmMenuShow="isDropDowmMenuShow" />
		<evaluationInput ref="evaluationInput" v-if="isShowInput" @onInputBlur="onInputBlur"
			@submitReply="submitReply" />
	</view>
</template>

<script>
	import dropDownMenu from "./components/dropdown-menu/dropDownMenu.vue";
	import evaluationItem from "./components/evaluation-item/evaluationItem";
	import evaluationInput from "./components/evaluation-input/evaluationInput.vue";
	import orderItem from "./components/order-item/orderItem.vue";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			dropDownMenu,
			evaluationItem,
			evaluationInput,
			orderItem
		},
		async onLoad() {
			await this.$loginStatus;
			this.restUrl = !this.userInfo.is_lawyer ? this.$restUrl.getUserEvaluationList : this.$restUrl
				.getLawyerEvaluationList;
			this.replyRestUrl = !this.userInfo.is_lawyer ? this.$restUrl.userSubmitReply : this.$restUrl
				.lawyerSubmitReply;
			this.current = !this.userInfo.is_lawyer ? 0 : 1;
			this.swiperCurrent = !this.userInfo.is_lawyer ? 0 : 1;
			this.getEvaluationList();
		},
		mounted() {
			uni.$off('refreshEvaluationList');
			uni.$on('refreshEvaluationList', () => {
				this.tabList[0].evaluationList = [];
				this.tabList[0].pageNum = 1;
				this.tabList[0].loadStatus = 'loadmore';
				this.getEvaluationList();
			})
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				isDropDowmMenuShow: false,
				isShowInput: false,
				currentReplyId: '',
				tabList: [{
					name: '未评价',
					status: 1,
					pageNum: 1,
					pageSize: 20,
					loadStatus: 'loadmore',
					evaluationList: [],
				}, {
					name: '已评价',
					status: 2,
					pageNum: 1,
					pageSize: 20,
					loadStatus: 'loadmore',
					evaluationList: [],
				}]
			}
		},
		computed: {
			topHeight() {
				return (750 * this.$systemInfo.statusBarHeight / this.$systemInfo.screenWidth) + 176;
			},
		},
		methods: {
			async getEvaluationList() {
				const current = this.current;
				if (this.tabList[current].loadStatus == 'nomore') {
					return
				}
				this.tabList[current].loadStatus = 'loading';
				let {
					data,
				} = await this.$u.post(this.restUrl, {
					page: this.tabList[current].pageNum,
					page_num: this.tabList[current].pageSize,
					status: this.tabList[current].status,
				});
				// data = data instanceof Array ? data : data.data;
				console.log('评价列表>>>>>>>>>>>>', data.data);
				console.log('total>>>>>>>>>>>>>>>>', data.total);
				this.tabList[current].evaluationList.push(...data.data);
				console.log('this.tabList[current].evaluationList>>>>>>>>>>>>>>>>>>', this.tabList)
				if (this.tabList[current].evaluationList.length >= data.total) {
					this.tabList[current].loadStatus = 'nomore';
				} else {
					this.tabList[current].loadStatus = 'loadmore';
					this.tabList[current].pageNum++;
				}

			},
			tabsChange(index) {
				if (index == this.current) {
					return
				}
				this.current = index;
				this.pageNum = 1;
				this.swiperCurrent = index;
				this.orderList = [];
				this.getEvaluationList();
				this.isDropDowmMenuShow = false;
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
				this.pageNum = 1;
				this.orderList = [];
				this.getEvaluationList();
			},
			onClickReply(e) {
				console.log(e)
				this.currentReplyId = e;
				this.isShowInput = true;
				this.$nextTick(() => {
					this.$refs.evaluationInput.replyText = '';
					this.$refs.evaluationInput.isFocus = false;
					setTimeout(() => {
						this.$refs.evaluationInput.isFocus = true;
					})
				})
			},
			onInputBlur() {
				this.$refs.evaluationInput.isFocus = false;
				this.isShowInput = false;
			},
			async submitReply(e) {
				console.log(e);
				await this.$u.post(this.replyRestUrl, {
					remark: e,
					eid: this.currentReplyId,
				})
				this.$showToast('回复成功');
				this.$refs.evaluationInput.replyText = '';
				this.isShowInput = false;
				this.tabList[1].evaluationList = [];
				this.tabList[1].loadStatus = 'loadmore';
				this.getEvaluationList();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./evaluationList.scss"
</style>
